<template>

    <el-menu
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      @select="handleSelect"
      :collapse="collapsed"
      collapse-transition:false
      unique-opened
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <template v-for="item in menus" >
          <el-submenu v-if="item.children && item.children.length>0" :index="item.id+''" :key="item.router+''">
                 <template slot="title">
                    <i class="el-icon-location"></i>
                    <span slot="title">{{item.name}}</span>
                </template>
                <el-menu-item v-for="child in item.children" :key="child.id" :index="child.router+''">
                    {{child.name}}
                </el-menu-item>
          </el-submenu>
          <el-menu-item v-else :key="item.id" :index="item.router+''">
            <i class="el-icon-location"></i>
            <span slot="title">{{item.name}}</span>
         </el-menu-item>
      </template>
    </el-menu>

</template>


<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 100%;
  margin:0px;
  border:0px;
  padding: 0px;
}
</style>

<script>
export default {
  name: 'LinkMenu',
  props: {
      menus: {
        type: Array,
        default () {
          return []
        }
      },
      collapsed: {
        type: Boolean,
        default () {
          return true;
        }
      }
  },
  data() {
    return {
      
    };
  },
  methods: {
    handleOpen(key, keyPath) {

    },
    handleClose(key, keyPath) {

    },
    handleSelect(key){
        this.$router.push({
            path: key
        });
    },
    change(){
       this.collapsed=!this.collapsed;
    }
  },
  watch:{
      collapsed:function(newValue,oldVaule){
          // alert(newValue);
      }
  }
};
</script>